<template>
	<view class="custom-tabs">
		<view v-for="(item, index) in list" :class="{ active: index == activeIndex }" class="custom-tabs-bar">
			<text @click="func(index)" class="tabbar-text">{{ item }}</text>
		</view>

		<!-- left width 都需要设置单位 -->
		<view :style="{ left: left + 'px', width: width + 'px' }" class="custom-tabs-cursor"></view>
	</view>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue';

// lang="ts"内部就可以编写ts
// 否则 泛型语法是不生效的
// 定义props
const prop = defineProps<{
	list: string[];
	activeIndex: number;
}>();
// 定义emit
const emit = defineEmits<{
	(e: 'activeChange', activeIndex: number): void;
}>();

const func = (index: number) => {
	// 最新的数据传递给 父组件
	emit('activeChange', index);

	// 要立刻更新 可以直接将Index传递进去取值
	// const currentDom = domList.value[index];
	// // 设置给状态变量
	// left.value = currentDom.left;
	// width.value = currentDom.width;

	// 数据更新-到同步会prop是异步的要等待-自己写定时器 或者用nextTick 等待更新完毕
	// setTimeout(() => {
	// nextTIck 数据更新完毕之后执行
	nextTick(() => {
		// 点击之后 基于当前的索引 移动元素的位置
		// prop.activeIndex需要点击两次才会更新
		const currentDom = domList.value[prop.activeIndex];
		// 设置给状态变量
		left.value = currentDom.left;
		width.value = currentDom.width;
	});

	// }, 300);
};

// 定义状态变量 动态的调整 位置 及宽度
const left = ref(20);
const width = ref(30);
// 保存 节点信息
const domList = ref<UniApp.NodeInfo[]>([]);

onMounted(() => {
	// 选择器对象
	const query = uni.createSelectorQuery();

	query.selectAll('.tabbar-text').boundingClientRect((res) => {
		// console.log(res)
		domList.value = res as UniApp.NodeInfo[];
		// 设置默认的位置 及宽度
		// 结合索引从数组中获取信息
		const currentDom = domList.value[prop.activeIndex];
		// console.log(currentDom);
		// 设置给状态变量
		left.value = currentDom.left;
		width.value = currentDom.width;
	});
	// 执行查询
	query.exec();
});
</script>

<!-- 提供的样式是scss的语法，需要设置style的lang标签 -->
<style lang="scss">
.custom-tabs {
	display: flex;
	position: relative;
	padding: 0 30rpx;
}

.custom-tabs-bar {
	height: 80rpx;
	line-height: 80rpx;
	color: #979797;
	padding-right: 30rpx;
	position: relative;

	&.active {
		color: #121826;
		font-weight: 500;
	}
}

.tabbar-text {
	font-size: 30rpx;
}
.custom-tabs-cursor {
	position: absolute;
	bottom: 3px;
	// 动态 改位置 left
	left: 20px;

	// 动态改宽度
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background-color: #2cb5a5;
	transition: all 0.3s ease-out;
}
</style>
